import _ from 'lodash';
import {
  View,
  Text,
  Image,
  Colors,
  Constants,
  Avatar,
  GridView,
  Card,
  GridViewProps,
} from 'react-native-ui-lib';
import React, {Component} from 'react';
import {Alert, ScrollView} from 'react-native';
import conversations from '../../data/conversations';
import products from '../../data/products';
import {TestCase, TestSuite} from '@rnoh/testerino';

class GridViewScreen extends Component {
  state = {
    contacts: _.flow(
      conversations => _.take(conversations, 15),
      (contacts: any[]) =>
        _.map(contacts, contact => ({
          imageProps: {
            source: {uri: contact.thumbnail},
            borderRadius: 999,
            style: {backgroundColor: Colors.grey60},
          },
          title: _.split(contact.name, ' ')[0],
          titleLines: 1,
          onPress: () => Alert.alert('My name is ' + contact.name),
        })),
    )(conversations),
    products: _.flow(
      products => _.take(products, 8),
      (products: any[]) =>
        _.map(products, (product, index) => ({
          imageProps: {
            source: {uri: product.mediaUrl},
            borderRadius: 4,
            style: {
              backgroundColor: Colors.grey60,
              borderWidth: 1,
              borderColor: Colors.grey50,
            },
          },
          title: product.name,
          titleTypography: 'subtextBold',
          onPress: () => Alert.alert('My price is ' + product.formattedPrice),
          renderOverlay: () => {
            if (index < 7) {
              return (
                <Text
                  text={product.price}
                  style={{alignSelf: 'center', marginTop: 3}}
                />
              );
            }
          },
        })),
    )(products) as GridViewProps['items'],
    pairs: _.flow(
      products => _.take(products, 2),
      (products: any[]) =>
        _.map(products, product => ({
          containerProps: {
          },
          renderCustomItem: () => {
            return (
              <Card height={150} width={180} activeOpacity={1}>
                <Image
                  style={{flex: 1, width: '100%'}}
                  source={require('../../assets/images/empty-state.jpg')}
                />
              </Card>
            );
          },
          title: product.name,
          subtitle: (
            <Text>
              <Text
                style={{
                  textDecorationLine: 'line-through',
                  color: Colors.grey30,
                }}>
                {product.formattedPrice}
              </Text>
              <Text style={{textDecorationLine: 'none'}}> $50</Text>
            </Text>
          ),
          description: product.inventory.status,
          descriptionLines: 2,
          alignToStart: true,
          onPress: () =>
            Alert.alert(
              'My price was ' + product.formattedPrice + ', now it is $50',
            ),
        })),
    )(products) as GridViewProps['items'],
    dynamicLayout: _.flow(
      products => _.take(products, 3),
      (products: any[]) =>
        _.map(products, product => ({
          imageProps: {
            source: {
              uri: product.mediaUrl,
            },
          },
          itemSize: {height: 90},
          title: 'Title',
          subtitle: 'subtitle',
          description: product.name,
          descriptionLines: 2,
          alignToStart: true,
          onPress: () => Alert.alert('Click!'),
        })),
    )(products),
    overlayText: _.flow(
      products => _.take(products, 2),
      (products: any[]) =>
        _.map(products, (product, index) => ({
          imageProps: {
            source: {
              uri: product.mediaUrl,
            },
            overlayType: Image.overlayTypes.VERTICAL,
            overlayColor: Colors.white,
          },
          itemSize: {height: 240},
          overlayText: true,
          title: product.name,
          subtitle: (
            <Text>
              <Text
                style={{
                  textDecorationLine: 'line-through',
                  color: Colors.grey30,
                }}>
                {product.formattedPrice}
              </Text>
              <Text style={{textDecorationLine: 'none'}}>
                {product.formattedPrice}
              </Text>
            </Text>
          ),
          description: '4 items',
          descriptionLines: 2,
          alignToStart: true,
          onPress: () =>
            Alert.alert(
              'My price was ' + product.formattedPrice + ', now it is $50',
            ),
          renderOverlay: () => {
            if (index === 0) {
              return (
                <Text
                  margin-10
                  text80BO
                  style={{
                    alignSelf: 'flex-start',
                    marginTop: 12,
                    marginLeft: 12,
                  }}>
                  {product.formattedPrice}
                </Text>
              );
            }
          },
        })),
    )(products) as GridViewProps['items'],

    avatars: _.flow(
      products => _.take(products, 9),
      (products: any[]) =>
        _.map(products, item => ({
          renderCustomItem: () => {
            const imageElementElement = item.thumbnail;
            return (
              <View flex center marginB-10>
                <Avatar size={100} source={{uri: imageElementElement}} />
              </View>
            );
          },
          onPress: () => Alert.alert('Your choose is  ' + item.name),
          title: item.name,
          titleLines: 2,
          titleTypography: 'bodySmall',
        })),
    )(products),
    squares: [
      Colors.red30,
      Colors.yellow30,
      Colors.blue30,
      Colors.violet30,
      Colors.green30,
    ].map(color => ({
      renderCustomItem: () => <View height={50} backgroundColor={color} />,
    })),
    orientation: Constants.orientation,
  };

  onLayout = () => {
    if (this.state.orientation !== Constants.orientation) {
      // Basically just for triggering render - can be any other variable
      // (Constants.orientation is already up-to-date and can be used directly)
      this.setState({
        orientation: Constants.orientation,
      });
    }
  };

  render() {
    const {
      contacts,
      dynamicLayout,
      overlayText,
      avatars,
      products,
      pairs,
      squares,
    } = this.state;

    return (
      <TestSuite name="GridView">
        <TestCase itShould="设置 activeBackgroundColor: red 属性 按下为红色反馈">
          <View padding-20>
            <ScrollView onLayout={this.onLayout}>
              <View padding-2>
                <Text center h1>
                  GridView
                </Text>

                <Text h3 marginV-s5>
                  Avatars
                </Text>
                <GridView
                  items={contacts}
                  viewWidth={280}
                  numColumns={6}
                  lastItemOverlayColor={Colors.rgba(
                    Colors.$backgroundPrimaryHeavy,
                    0.6,
                  )}
                  lastItemLabel={7}
                  key={contacts.title}
                />

                <Text h3 marginV-s5>
                  Thumbnails
                </Text>
                <GridView
                  items={products}
                  numColumns={4}
                  viewWidth={280}
                  lastItemOverlayColor={Colors.rgba(
                    Colors.$backgroundPrimaryHeavy,
                    0.6,
                  )}
                  lastItemLabel={42}
                  keepItemSize
                />

                <Text marginV-s5 text60BO>
                  Pairs
                </Text>
                <GridView items={pairs} numColumns={2} />
                <Text marginV-s5 text60BO>
                  Dynamic itemSize
                  <Text text90> (Using maxItemWidth)</Text>
                </Text>
                <GridView items={dynamicLayout} maxItemWidth={120} />
                <Text marginV-s5 text60BO>
                  OverlayText
                </Text>
                <GridView items={overlayText} numColumns={2} />
                <Text marginV-s5 text60BO>
                  Custom content (Avatars)
                </Text>
                <GridView
                  items={avatars}
                  numColumns={Constants.orientation === 'landscape' ? 6 : 3}
                />
                <Text marginV-s5 text60BO>
                  Custom content (Squares)
                </Text>
                <GridView items={squares} numColumns={3} />
              </View>
            </ScrollView>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

export default GridViewScreen;
